<template>
  <ElSpace direction="vertical" alignment="start" :size="10">
    <div>
      消息提示：
      <ElButton type="success" @click="ElMessage.success(useAppStore.name)">
        成功
      </ElButton>
      <ElButton type="danger" @click="ElMessage.error(useAppStore.name)">
        错误
      </ElButton>
      <ElButton type="info" @click="ElMessage.info(useAppStore.name)">
        信息
      </ElButton>
      <ElButton type="warning" @click="ElMessage.warning(useAppStore.name)">
        警告
      </ElButton>
    </div>
    <ElButton type="primary" @click="handleQueue">消息队列</ElButton>
    <div
      style="width: 100%; height: 100px; border: 1px solid"
      @contextmenu="handleRightClickMenu"
    >
      右击该区域，出现右击菜单
    </div>
  </ElSpace>
</template>
<script setup lang="ts">
import { ElSpace, ElButton, ElMessageBox, ElMessage } from "element-plus";
import hxzxUtils from "hxzx-utils";
import store from "@/store";
import { onBeforeUnmount } from "vue";
import rightClickMenu from "@/library/rightClickMenu";
const useAppStore = store.useAppStore();
/**
 * 右击菜单
 */
const handleRightClickMenu = function (event: MouseEvent) {
  rightClickMenu(event, [
    {
      label: "primary",
      type: "primary",
      click() {
        ElMessage.info("primary");
      },
    },
    {
      label: "danger",
      type: "danger",
      click() {
        ElMessage.info("danger");
      },
    },
  ]);
};
/**
 * 消息队列
 */
const handleQueue = function () {
  // 这里面还有很多其他工具函数 https://jjp.world/hxzx-utils/#/
  const queue = new hxzxUtils.queue();
  // 模拟队列消息
  for (let i = 0; i < 5; i++) {
    queue.push(function (done) {
      ElMessageBox.alert(`我是第 ${i + 1} 个消息`, "标题", {
        confirmButtonText: "开始下一个队列",
        showClose: false,
        callback: done,
      });
    });
  }
};
/**
 * 通信
 *
 * 详细API: https://jjp.world/hxzx-utils/#/api/1.0.4/eventBus
 */
// 发送
hxzxUtils.eventBus.emit("test", useAppStore.name);
// 监听
hxzxUtils.eventBus.on("test", function (v: string) {
  console.log(v);
});
// 组件销毁时应删除该监听
onBeforeUnmount(function () {
  hxzxUtils.eventBus.off("test");
});
/**
 * 更多工具
 *
 * 详细API: https://jjp.world/hxzx-utils
 */
</script>
